<script setup lang="ts">
  import { ref } from 'vue'
  const paging = ref()
  const dataList = ref([])

  const loadFun = (pageNo:number, pageSize:number) => {
    paging.value.complete([
      {
        id:0,
        time:'2024年10月17日',
        status:'待审核',
        name:'2024年四川“选星计划”暑期训练营',
        idCard:'510722199910175458',
        studentName:'测试',
        linker:'代丹阳',
        linkerTel:'17828041641'
      }
    ])
  }
</script>

<template>
  <z-paging ref="paging" class="z-paging" v-model="dataList" @query="loadFun">
    <template #top>
      <xx-title title="退费审核"/>
    </template>
    <view class="refunds-item" v-for="item in dataList" :key="item.id">
      <view class="refunds-header">
        <view class="refunds-time">
          报名时间：{{item.time}}
        </view>
        <view class="refunds-status">
          {{ item.status }}
        </view>
      </view>
      <view class="refunds-body">
        <view class="refunds-body-name">{{ item.name }}</view>
        <view class="refunds-item-info">
          <view class="label">学员信息：</view>
          <view class="value">{{ item.studentName }}({{ item.idCard }})</view>
        </view>

        <view class="refunds-item-info">
          <view class="label">联系人：</view>
          <view class="value">{{ item.linker }}</view>
        </view>
        <view class="refunds-item-info">
          <view class="label">联系电话：</view>
          <view class="value">{{ item.linkerTel }}</view>
        </view>
      </view>
      <view class="refunds-btn">
        <view class="btn">不通过</view>
        <view class="btn success">通过</view>
      </view>
    </view>
  </z-paging>
</template>

<style scoped lang="scss">
  ::v-deep.z-paging-content{
    background: #F5F5F5;
  }
  .refunds-item{
    position: relative;
    background: #FFFFFF;
    margin: 28rpx;
    overflow: hidden;
    border-radius: 16rpx;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.01),0 4px 5px 0 rgba(0, 0, 0, 0.02),0 2px 4px -1px rgba(0, 0, 0, 0.03);
    padding: 20rpx;
    box-sizing: border-box;
    .refunds-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #F3F3F3;
      .refunds-time{
        font-size: 24rpx;
        color: #818496;
      }
      .refunds-status{
        font-size: 28rpx;
      }
    }
    .refunds-body{
      padding: 20rpx;
      border-bottom: 1rpx solid #F3F3F3;
      .refunds-body-name{
        padding-bottom: 10rpx;
        font-weight: 500;
        color: #21252E;
      }
      .refunds-item-info{
        padding: 10rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &:last-child{
          padding-bottom: 0;
        }
        .label{
          font-size: 28rpx;
          color: #818496;
        }
        .value{
          font-size: 28rpx;
          color: #818496;
        }
      }
    }
    .refunds-btn{
      text-align: right;
      padding-top: 20rpx;
      .btn{
       margin-left: 20rpx;
        display: inline-block;
        vertical-align: middle;
        padding: 8rpx 24rpx;
        font-size: 28rpx;
        color: #505363;
        border: 1rpx solid #ECEEF1;
        border-radius: 50rpx;
        &.success{
          background-color: #92C75B;
          color: #ffffff;
        }
      }
    }
  }
</style>
